<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_react生命周期(旧)</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /*
            1. 初始化阶段: 由ReactDOM.render()触发----初次渲染 
                            1.constructor()
                            // 组件将要挂载的时候 
                            2.componentWillMount()
                            3.render()
                            4.componentDidMount()====>常用
                            一般在这个钩子函数中做一些初始化的事,例如:开启定时器, 发送网络请求等 
            2.更新阶段: 由组件内部this.setState()或 父组件render 触发 
                        1. shouldComponentUpdate()
                        2. componentWillUpdate()
                        3. render() ====> 必须使用的一个
                        4. componentDidUpdate() 
            3.卸载组件:由ReactDOM.unmountComponentAtNode()触发 
                        1.componentWillUnmount()====>常用  
                        一般在这个钩子函数中做一些收尾的事如:关闭定时器,取消订阅等 

        */


        class Count extends React.Component{
            constructor(props){
                console.log("Count----constructor")
                super(props)
                this.state={count:0}

            }
            // 组件将要挂载的时候 
            componentWillMount (){
                console.log('componentWillMount')
            }

            componentWillUnmount () {
                // 将要卸载组件的时候走的钩子函数 
                console.log('componentWillUnmount')
            }

            shouldComponentUpdate(){
                // 控制组件更新的"阀门"
                console.log('shouldComponentUpdate')
                return true;
            }

            componentWillUpdate(){
                //组件将要更新的钩子
                console.log('componentWillUpdate')
            }
            componentDidUpdate(){
                // 组件更新完毕的钩子 
                console.log('componentDidUpdate')
            }


            add = () => {
                const {count}=this.state
                this.setState({count:count+1})
            }

            death = () => { 
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新按钮的回调 
            force = () => {
                this.forceUpdate()
            }

            render() {
                console.log('Count====>render')
                const {count}=this.state
                return (
                    <div>
                        <h2>当前求和:{count}</h2>   
                        <button onClick={this.add}>点我+1</button> 
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更新任何状态中的数据,强制更新一下</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Count/>,document.getElementById('test'))
    </script>
    
</body>
</html>